@dss-kit/ui-kit 0.3.1 → 0.3.2

package/dist/components/builders/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import { createColumnHelper } from '@tanstack/react-table';
 import { TableProps } from './Table.types';
 declare const Table: {
-    <TData>({ ref, data, columns, showBorders, enableSorting, enablePagination, enableRowSelection, enableMultiRowSelection, enableColumnPinning, columnPinning: controlledColumnPinning, onColumnPinningChange, sorting: controlledSorting, onSortingChange, columnFilters: controlledColumnFilters, onColumnFiltersChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, pagination: controlledPagination, onPaginationChange, rowSelection: controlledRowSelection, onRowSelectionChange, totalCount, loading, emptyLabels, loadingLabels, className, containerClassName, theadClassName, tbodyClassName, emptyStateClassName, emptyStateTitleClassName, emptyStateDescriptionClassName, paginationClassName, tableOptions, onRowClick, getRowId, headCellComponent: HeadCellComponent, bodyCellComponent: BodyCellComponent, headRowComponent: HeadRowComponent, bodyRowComponent: BodyRowComponent, onReset, paginationVariant, paginationLabels, renderPageSizeSelectorDropdownItem, renderPageSizeSelectorInputItem, }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+    <TData>({ ref, data, columns, showBorders, enableSorting, enablePagination, enableRowSelection, enableMultiRowSelection, enableColumnPinning, columnPinning: controlledColumnPinning, onColumnPinningChange, sorting: controlledSorting, onSortingChange, manualSorting, columnFilters: controlledColumnFilters, onColumnFiltersChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, pagination: controlledPagination, onPaginationChange, rowSelection: controlledRowSelection, onRowSelectionChange, totalCount, loading, emptyLabels, loadingLabels, className, containerClassName, theadClassName, tbodyClassName, emptyStateClassName, emptyStateTitleClassName, emptyStateDescriptionClassName, paginationClassName, tableOptions, onRowClick, getRowId, headCellComponent: HeadCellComponent, bodyCellComponent: BodyCellComponent, headRowComponent: HeadRowComponent, bodyRowComponent: BodyRowComponent, onReset, paginationVariant, paginationLabels, renderPageSizeSelectorDropdownItem, renderPageSizeSelectorInputItem, }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     HeadCellContent: import('react').ForwardRefExoticComponent<Omit<import('../Box').BoxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
     BodyCellContent: import('react').ForwardRefExoticComponent<Omit<import('../Box').BoxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/builders/Table/Table.js

@@ -1,229 +1,231 @@
-import { jsx as o, jsxs as T } from "react/jsx-runtime";
-import { cx as r, css as M } from "@emotion/css";
-import { useReactTable as Re, getPaginationRowModel as xe, getSortedRowModel as Pe, getCoreRowModel as Te, flexRender as H, createColumnHelper as He } from "@tanstack/react-table";
+import { jsx as o, jsxs as H } from "react/jsx-runtime";
+import { cx as m, css as B } from "@emotion/css";
+import { useReactTable as Pe, getPaginationRowModel as Te, getSortedRowModel as He, getCoreRowModel as Me, flexRender as M, createColumnHelper as ve } from "@tanstack/react-table";
 import { useImperativeHandle as Ne } from "react";
-import ve from "../../../assets/svg/table/loading.svg.js";
-import Me from "../../../assets/svg/table/search.svg.js";
-import { styles as ze } from "./styles.js";
+import Be from "../../../assets/svg/table/loading.svg.js";
+import ze from "../../../assets/svg/table/search.svg.js";
+import { styles as Ie } from "./styles.js";
 import { useControllableState as t } from "./Table.hooks.js";
-import { getColumnPinningStyles as N } from "./Table.utils.js";
-import { TablePlaceholder as v } from "./TablePlaceholder/TablePlaceholder.js";
-import { TableWrapper as Be } from "./TableWrapper/TableWrapper.js";
-import { TableHeadRow as Ie } from "./TableHeadRow/TableHeadRow.js";
-import { TablePagination as Ve } from "./TablePagination/TablePagination.js";
-import { TableHeadCell as ke } from "./TableHeadCell/TableHeadCell.js";
-import { TableBodyCell as Fe } from "./TableBodyCell/TableBodyCell.js";
-import { TableBodyRow as We } from "./TableBodyRow/TableBodyRow.js";
-import { TableHeadCellContent as je } from "./TableHeadCellContent/TableHeadCellContent.js";
-import { TableBodyCellContent as Le } from "./TableBodyCellContent/TableBodyCellContent.js";
-import { TableHeadCellContentSortable as De } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
-import { theme as qe } from "../../../utils/theme/index.js";
-import { Box as Ae } from "../Box/Box.js";
-const { spacing: f, color: l } = qe, Ee = M({
+import { getColumnPinningStyles as v } from "./Table.utils.js";
+import { TablePlaceholder as N } from "./TablePlaceholder/TablePlaceholder.js";
+import { TableWrapper as Ve } from "./TableWrapper/TableWrapper.js";
+import { TableHeadRow as ke } from "./TableHeadRow/TableHeadRow.js";
+import { TablePagination as Fe } from "./TablePagination/TablePagination.js";
+import { TableHeadCell as je } from "./TableHeadCell/TableHeadCell.js";
+import { TableBodyCell as We } from "./TableBodyCell/TableBodyCell.js";
+import { TableBodyRow as Le } from "./TableBodyRow/TableBodyRow.js";
+import { TableHeadCellContent as De } from "./TableHeadCellContent/TableHeadCellContent.js";
+import { TableBodyCellContent as qe } from "./TableBodyCellContent/TableBodyCellContent.js";
+import { TableHeadCellContentSortable as Ae } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
+import { theme as Ee } from "../../../utils/theme/index.js";
+import { Box as Ge } from "../Box/Box.js";
+const { spacing: f, color: l } = Ee, Je = B({
   width: "100%",
   maxWidth: "100%",
   minWidth: "max-content",
   borderCollapse: "collapse",
   borderSpacing: 0,
   backgroundColor: l.fill.bgPrimary
-}), Ge = M({
+}), Ke = B({
   backgroundColor: l.fill.bgSecondary,
   color: l.text.tertiary
-}), m = ({
+}), s = ({
   ref: z,
-  data: g,
-  columns: B,
+  data: c,
+  columns: I,
   showBorders: d = !0,
-  enableSorting: I = !1,
+  enableSorting: V = !1,
   enablePagination: b = !1,
-  enableRowSelection: V = !1,
-  enableMultiRowSelection: k = !1,
+  enableRowSelection: k = !1,
+  enableMultiRowSelection: F = !1,
   enableColumnPinning: p = !1,
-  columnPinning: F,
+  columnPinning: j,
   onColumnPinningChange: W,
-  sorting: j,
-  onSortingChange: L,
-  columnFilters: D,
-  onColumnFiltersChange: q,
-  columnVisibility: A,
-  onColumnVisibilityChange: E,
-  pagination: G,
-  onPaginationChange: J,
-  rowSelection: K,
-  onRowSelectionChange: O,
-  totalCount: s,
+  sorting: L,
+  onSortingChange: D,
+  manualSorting: q,
+  columnFilters: A,
+  onColumnFiltersChange: E,
+  columnVisibility: G,
+  onColumnVisibilityChange: J,
+  pagination: K,
+  onPaginationChange: O,
+  rowSelection: Q,
+  onRowSelectionChange: U,
+  totalCount: i,
   loading: u = !1,
-  emptyLabels: Q = {
+  emptyLabels: X = {
     title: "Nothing found",
-    description: "No results found for “result”",
+    description: "Try adjusting your search or filters",
     action: "Reset"
   },
-  loadingLabels: U = {
+  loadingLabels: Y = {
     title: "Loading...",
     description: "Please wait or reset your promt",
     action: "Reset"
   },
-  className: X,
+  className: Z,
   containerClassName: C,
-  theadClassName: Y,
-  tbodyClassName: Z,
+  theadClassName: _,
+  tbodyClassName: $,
   emptyStateClassName: S,
   emptyStateTitleClassName: y,
   emptyStateDescriptionClassName: w,
-  paginationClassName: _,
-  tableOptions: $ = {},
+  paginationClassName: ee,
+  tableOptions: oe = {},
   onRowClick: R,
-  getRowId: ee,
-  headCellComponent: oe = ke,
-  bodyCellComponent: le = Fe,
-  headRowComponent: ne = Ie,
-  bodyRowComponent: te = We,
+  getRowId: le,
+  headCellComponent: ne = je,
+  bodyCellComponent: te = We,
+  headRowComponent: ie = ke,
+  bodyRowComponent: ae = Le,
   onReset: x,
-  paginationVariant: ie,
-  paginationLabels: ae,
-  renderPageSizeSelectorDropdownItem: re,
-  renderPageSizeSelectorInputItem: me
+  paginationVariant: re,
+  paginationLabels: me,
+  renderPageSizeSelectorDropdownItem: se,
+  renderPageSizeSelectorInputItem: ge
 }) => {
-  const [se, ce] = t(
-    j,
+  const [ce, de] = t(
     L,
-    []
-  ), [ge, de] = t(
     D,
-    q,
     []
   ), [pe, Ce] = t(
     A,
     E,
-    {}
-  ), [n, h] = t(
+    []
+  ), [he, fe] = t(
     G,
     J,
+    {}
+  ), [n, h] = t(
+    K,
+    O,
     { pageIndex: 0, pageSize: 10 }
-  ), [he, fe] = t(K, O, {}), [be, ue] = t(
-    F,
+  ), [be, ue] = t(Q, U, {}), [Se, ye] = t(
+    j,
     W,
     { left: [], right: [] }
-  ), i = Re({
-    data: g,
-    columns: B,
+  ), P = q ?? !!i, a = Pe({
+    data: c,
+    columns: I,
     state: {
-      sorting: se,
-      columnFilters: ge,
-      columnVisibility: pe,
+      sorting: ce,
+      columnFilters: pe,
+      columnVisibility: he,
       pagination: n,
-      rowSelection: he,
-      columnPinning: be
+      rowSelection: be,
+      columnPinning: Se
     },
-    onSortingChange: ce,
-    onColumnFiltersChange: de,
-    onColumnVisibilityChange: Ce,
+    onSortingChange: de,
+    onColumnFiltersChange: Ce,
+    onColumnVisibilityChange: fe,
     onPaginationChange: h,
-    onRowSelectionChange: fe,
-    onColumnPinningChange: ue,
-    getCoreRowModel: Te(),
-    getSortedRowModel: I ? Pe() : void 0,
-    getPaginationRowModel: b ? xe() : void 0,
-    enableRowSelection: V,
-    enableMultiRowSelection: k,
+    onRowSelectionChange: ue,
+    onColumnPinningChange: ye,
+    getCoreRowModel: Me(),
+    getSortedRowModel: V && !P ? He() : void 0,
+    getPaginationRowModel: b ? Te() : void 0,
+    enableRowSelection: k,
+    enableMultiRowSelection: F,
     enableColumnPinning: p,
-    getRowId: ee,
-    manualPagination: !!s,
-    pageCount: s ? Math.ceil(s / n.pageSize) : void 0,
-    ...$
+    getRowId: le,
+    manualSorting: P,
+    manualPagination: !!i,
+    pageCount: i ? Math.ceil(i / n.pageSize) : void 0,
+    ...oe
   });
-  Ne(z, () => i);
-  const { rows: P } = i.getRowModel(), Se = (e, a) => {
-    R && R(e.original, a);
-  }, ye = (e) => /* @__PURE__ */ o(
-    oe,
+  Ne(z, () => a);
+  const { rows: T } = a.getRowModel(), we = (e, r) => {
+    R && R(e.original, r);
+  }, Re = (e) => /* @__PURE__ */ o(
+    ne,
     {
       style: {
         width: e.getSize(),
-        ...p && N(i, e.column, l.fill.bgSecondary)
+        ...p && v(a, e.column, l.fill.bgSecondary)
       },
       onClick: e.column.getToggleSortingHandler(),
-      children: e.isPlaceholder ? null : H(e.column.columnDef.header, e.getContext())
+      children: e.isPlaceholder ? null : M(e.column.columnDef.header, e.getContext())
     },
     e.id
-  ), we = (e, a) => /* @__PURE__ */ o(
-    te,
+  ), xe = (e, r) => /* @__PURE__ */ o(
+    ae,
     {
       showBorders: d,
       isSelected: e.getIsSelected(),
-      onClick: () => Se(e, a),
-      children: e.getVisibleCells().map((c) => /* @__PURE__ */ o(
-        le,
+      onClick: () => we(e, r),
+      children: e.getVisibleCells().map((g) => /* @__PURE__ */ o(
+        te,
         {
-          style: p ? N(i, c.column, l.fill.bgPrimary) : void 0,
-          children: H(c.column.columnDef.cell, c.getContext())
+          style: p ? v(a, g.column, l.fill.bgPrimary) : void 0,
+          children: M(g.column.columnDef.cell, g.getContext())
         },
-        c.id
+        g.id
       ))
     },
     e.id
   );
   return u ? /* @__PURE__ */ o(
-    v,
+    N,
     {
       icon: /* @__PURE__ */ o(
-        ve,
+        Be,
         {
           width: 32,
           height: 32,
           style: { color: l.icon.tertiary, marginBottom: f.sm }
         }
       ),
-      labels: U,
+      labels: Y,
       onReset: x,
-      className: r(C, S),
+      className: m(C, S),
       titleClassName: y,
       descriptionClassName: w
     }
-  ) : P.length ? /* @__PURE__ */ T(Ae, { w: "full", gap: f.xl, className: r(C), children: [
-    /* @__PURE__ */ o(Be, { data: g, showBorders: d, children: /* @__PURE__ */ T("table", { className: r(Ee, ze.table, X), children: [
-      /* @__PURE__ */ o("thead", { className: r(Ge, Y), children: i.getHeaderGroups().map((e) => /* @__PURE__ */ o(ne, { showBorders: d, children: e.headers.map(ye) }, e.id)) }),
-      /* @__PURE__ */ o("tbody", { className: Z, children: P.map((e, a) => we(e, a)) })
+  ) : T.length ? /* @__PURE__ */ H(Ge, { w: "full", gap: f.xl, className: m(C), children: [
+    /* @__PURE__ */ o(Ve, { data: c, showBorders: d, children: /* @__PURE__ */ H("table", { className: m(Je, Ie.table, Z), children: [
+      /* @__PURE__ */ o("thead", { className: m(Ke, _), children: a.getHeaderGroups().map((e) => /* @__PURE__ */ o(ie, { showBorders: d, children: e.headers.map(Re) }, e.id)) }),
+      /* @__PURE__ */ o("tbody", { className: $, children: T.map((e, r) => xe(e, r)) })
     ] }) }),
     b && !u && /* @__PURE__ */ o(
-      Ve,
+      Fe,
       {
         pageIndex: n.pageIndex,
         pageSize: n.pageSize,
-        totalCount: s || g.length,
-        variant: ie,
-        labels: ae,
-        renderPageSizeSelectorDropdownItem: re,
-        renderPageSizeSelectorInputItem: me,
+        totalCount: i || c.length,
+        variant: re,
+        labels: me,
+        renderPageSizeSelectorDropdownItem: se,
+        renderPageSizeSelectorInputItem: ge,
         onPageChange: (e) => h({ ...n, pageIndex: e }),
         onPageSizeChange: (e) => h({ ...n, pageSize: e, pageIndex: 0 }),
-        className: _
+        className: ee
       }
     )
   ] }) : /* @__PURE__ */ o(
-    v,
+    N,
     {
       icon: /* @__PURE__ */ o(
-        Me,
+        ze,
         {
           width: 24,
           height: 24,
           style: { color: l.icon.tertiary, marginBottom: f.sm }
         }
       ),
-      labels: Q,
+      labels: X,
       onReset: x,
-      className: r(C, S),
+      className: m(C, S),
       titleClassName: y,
       descriptionClassName: w
     }
   );
 };
-m.displayName = "Table";
-m.HeadCellContent = je;
-m.BodyCellContent = Le;
-m.HeadCellContentSortable = De;
-m.createColumnHelper = He;
+s.displayName = "Table";
+s.HeadCellContent = De;
+s.BodyCellContent = qe;
+s.HeadCellContentSortable = Ae;
+s.createColumnHelper = ve;
 export {
-  m as Table
+  s as Table
 };

package/dist/components/builders/Table/Table.types.d.ts

@@ -32,6 +32,17 @@ export interface TableProps<TData> {
     sorting?: SortingState;
     /** Callback при изменении сортировки */
     onSortingChange?: (sorting: SortingState) => void;
+    /**
+     * Серверная (manual) сортировка. Когда `true`, таблица не сортирует данные
+     * на клиенте — она лишь сообщает о смене состояния через `onSortingChange`,
+     * а отсортированные данные должен вернуть бэкенд. Используйте вместе с
+     * контролируемым `sorting`, чтобы отображать активную колонку и направление.
+     *
+     * По умолчанию включается автоматически, когда задан `totalCount`
+     * (признак серверной пагинации).
+     * @default Boolean(totalCount)
+     */
+    manualSorting?: boolean;
     /** Состояние фильтров (контролируемое) */
     columnFilters?: ColumnFiltersState;
     /** Callback при изменении фильтров */
@@ -72,7 +83,7 @@ export interface TableProps<TData> {
     /** @default false */
     loading?: boolean;
     /** Сообщение при отсутствии данных */
-    /** @default { title: "Nothing found", description: "No results found for “result”", action: "Reset" } */
+    /** @default { title: "Nothing found", description: "Try adjusting your search or filters", action: "Reset" } */
     emptyLabels?: {
         title: string;
         description: string;

package/dist/components/builders/Table/TablePlaceholder/TablePlaceholder.js

@@ -1,10 +1,10 @@
-import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
 import { Button as l } from "../../../controls/Button/Button.js";
 import { Box as s } from "../../Box/Box.js";
 import { theme as p } from "../../../../utils/theme/index.js";
-import { Text as e } from "../../Text/Text.js";
-const { spacing: o, cornerRadius: h } = p, f = ({
-  icon: r,
+import { Text as r } from "../../Text/Text.js";
+const { spacing: e, cornerRadius: h } = p, f = ({
+  icon: i,
   labels: t,
   onReset: n,
   className: c,
@@ -15,34 +15,36 @@ const { spacing: o, cornerRadius: h } = p, f = ({
   {
     w: "full",
     borderRadius: h.md,
-    py: o["5xl"],
-    px: o["10xl"],
+    py: e["5xl"],
+    px: e["10xl"],
     alignItems: "center",
     className: c,
     children: [
-      r,
-      /* @__PURE__ */ i(
-        e,
+      i,
+      /* @__PURE__ */ o(
+        r,
         {
-          mb: o.xs,
+          mb: e.xs,
           variant: "title-3",
           fontWeight: "semibold",
           className: m,
+          center: !0,
           children: t.title
         }
       ),
-      /* @__PURE__ */ i(
-        e,
+      /* @__PURE__ */ o(
+        r,
         {
-          mb: o.md,
+          mb: e.md,
           colorName: "tertiary",
           variant: "body-1",
           fontWeight: "medium",
           className: a,
+          center: !0,
           children: t.description
         }
       ),
-      typeof t.action == "string" ? /* @__PURE__ */ i(
+      typeof t.action == "string" ? /* @__PURE__ */ o(
         l,
         {
           width: "auto",